<template>
	<view class="flex-one-line" style="padding: 18rpx 150rpx;">
		<!-- <view :class="[showNewProduct ? 'checked-yellow' : '']" @click="handleSortType({ sort: showNewProduct, type: 'newProduct' })">默认</view> -->
		<view :class="[showCreateDate ? 'checked-yellow' : '']" @click="handleSortType({ sort: showCreateDate, type: 'createDate' })">新发布</view>
		<view :class="[showPlays ? 'checked-yellow' : '']" @click="handleSortType({ sort: showPlays, type: 'plays' })">播放多</view>
	</view>
</template>

<script>
/**
 * Sort
 * @description 商品排序布局组件
 * @event {Function} handleSortType 点击事件
 * @example <MediaSort @handleSortType="handleSortType()"></MediaSort>
 */
export default {
	name: 'sortMedia',
	//
	// components: {
	// 	Sticky
	// },
	//
	data() {
		return {
			// showNewProduct: false,
			showCreateDate: false,
			showPlays: false
		};
	},
	//
	methods: {
		handleSortType(item) {
			// if (item.type === 'newProduct') {
			// 	this.showNewProduct = !this.showNewProduct;
			// 	item.sort = this.showNewProduct;
			// } else 
			if (item.type === 'createDate') {
				this.showCreateDate = !this.showCreateDate;
				item.sort = this.showCreateDate;
			} else if (item.type === 'plays') {
				this.showPlays = !this.showPlays;
				item.sort = this.showPlays;
			}
			this.$emit('sort:click', item);
		}
	}
};
</script>

<style lang="scss" scoped></style>
